<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子</title>
</head>
<body>
    <!-- justify-content属性支持多种属性值，每种属性值都会对项目在主轴上的对齐方式产生不同的影响：

flex-start：项目从容器的开始位置对齐。这是默认值。
flex-end：项目从容器的结束位置对齐。
center：项目在容器的中心位置对齐。
space-between：项目之间的间隔相等，第一个项目与容器的开始位置紧贴，最后一个项目与容器的结束位置紧贴。
space-around：项目两侧的间隔相等，即项目之间的间隔是项目与容器边缘间隔的两倍。
space-evenly：项目之间的间隔以及项目与容器边缘的间隔都相等。 -->

<!-- align-items是CSS中的一个属性，它主要用于在flexbox布局中控制子元素在交叉轴（默认为y轴，即竖直方向）上的对齐方式。 -->
<!-- 
stretch（默认值）：如果子元素的高度没有设置或者为auto，那么子元素会被拉伸以适应父容器的高度。
flex-start：子元素与交叉轴的起点对齐。
flex-end：子元素与交叉轴的终点对齐。
center：子元素在交叉轴上居中对齐。
baseline：子元素与它们的基线对齐。基线是文本行下方的一条线，通常用于对齐文本。
normal：此关键字的效果取决于所处的布局模式。在flexbox布局中，其行为类似于stretch。 
-->
</body>
</html>